<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome能力详解 - Chrome插件创意库</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/main.css">
    <style>
        pre {
            background-color: #1a202c;
            color: #e2e8f0;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1rem 0;
        }
        code {
            font-family: monospace;
        }
        .inline-code {
            background-color: #f7fafc;
            padding: 0.25rem;
            border-radius: 0.25rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg fixed w-full top-0 z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <img src="assets/chrome-logo.png" alt="Chrome Logo" class="h-8 w-8 mr-2">
                        <span class="text-xl font-bold text-gray-800">Chrome插件创意库</span>
                    </a>
                </div>
                <div class="flex items-center">
                    <a href="index.html" class="text-gray-600 hover:text-gray-900">
                        <i class="fas fa-arrow-left mr-2"></i>返回首页
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 pt-20 pb-12">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-8">Chrome浏览器扩展能力详解</h1>
            
            <!-- 目录 -->
            <div class="mb-12 p-6 bg-gray-50 rounded-lg">
                <h2 class="text-xl font-semibold mb-4">目录</h2>
                <ul class="space-y-2">
                    <li><a href="#permissions" class="text-blue-600 hover:text-blue-800">权限系统</a></li>
                    <li><a href="#core-apis" class="text-blue-600 hover:text-blue-800">核心API能力</a></li>
                    <li><a href="#storage" class="text-blue-600 hover:text-blue-800">存储能力</a></li>
                    <li><a href="#network" class="text-blue-600 hover:text-blue-800">网络请求能力</a></li>
                    <li><a href="#ui" class="text-blue-600 hover:text-blue-800">用户界面能力</a></li>
                    <li><a href="#system" class="text-blue-600 hover:text-blue-800">系统集成能力</a></li>
                    <li><a href="#devtools" class="text-blue-600 hover:text-blue-800">开发者工具能力</a></li>
                    <li><a href="#security" class="text-blue-600 hover:text-blue-800">安全与隐私能力</a></li>
                </ul>
            </div>

            <!-- 内容区域 -->
            <div class="space-y-12">
                <!-- 权限系统 -->
                <section id="permissions">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">权限系统</h2>
                    <p class="mb-4 text-gray-700">Chrome扩展使用声明式权限系统，在manifest.json中声明所需权限。</p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-4">主机权限</h3>
                    <pre><code>{
  "host_permissions": [
    "http://*/*",      // 所有HTTP网站
    "https://*/*",     // 所有HTTPS网站
    "*://*.google.com" // 特定域名
  ]
}</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">可选权限</h3>
                    <ul class="list-disc ml-6 text-gray-700">
                        <li>运行时可动态请求</li>
                        <li>用户可随时撤销</li>
                        <li>通过chrome.permissions API管理</li>
                    </ul>

                    <h3 class="text-xl font-semibold mt-6 mb-4">权限级别</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold mb-2">1. 基础权限</h4>
                            <ul class="list-disc ml-6 text-gray-700">
                                <li><code class="inline-code">activeTab</code>: 访问当前活动标签页</li>
                                <li><code class="inline-code">tabs</code>: 访问标签页信息</li>
                                <li><code class="inline-code">bookmarks</code>: 书签管理</li>
                                <li><code class="inline-code">history</code>: 浏览历史访问</li>
                                <li><code class="inline-code">storage</code>: 数据存储</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">2. 敏感权限</h4>
                            <ul class="list-disc ml-6 text-gray-700">
                                <li><code class="inline-code">webRequest</code>: 网络请求拦截和修改</li>
                                <li><code class="inline-code">proxy</code>: 代理设置</li>
                                <li><code class="inline-code">privacy</code>: 隐私设置</li>
                                <li><code class="inline-code">cookies</code>: Cookie管理</li>
                                <li><code class="inline-code">downloads</code>: 下载管理</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">3. 强大权限</h4>
                            <ul class="list-disc ml-6 text-gray-700">
                                <li><code class="inline-code">declarativeNetRequest</code>: 网络请求规则</li>
                                <li><code class="inline-code">system.cpu</code>: CPU信息</li>
                                <li><code class="inline-code">system.memory</code>: 内存信息</li>
                                <li><code class="inline-code">system.storage</code>: 存储信息</li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 核心API能力 -->
                <section id="core-apis">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">核心API能力</h2>

                    <h3 class="text-xl font-semibold mt-6 mb-4">1. 标签页管理 (chrome.tabs)</h3>
                    <pre><code>// 创建新标签页
chrome.tabs.create({url: "https://example.com"});

// 查询标签页
chrome.tabs.query({active: true}, function(tabs) {});

// 更新标签页
chrome.tabs.update(tabId, {url: "new-url"});

// 移动标签页
chrome.tabs.move(tabId, {index: newIndex});

// 关闭标签页
chrome.tabs.remove(tabId);</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">2. 窗口管理 (chrome.windows)</h3>
                    <pre><code>// 创建新窗口
chrome.windows.create({url: "https://example.com"});

// 获取所有窗口
chrome.windows.getAll({populate: true}, function(windows) {});

// 更新窗口
chrome.windows.update(windowId, {state: "maximized"});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">3. 书签管理 (chrome.bookmarks)</h3>
                    <pre><code>// 创建书签
chrome.bookmarks.create({
  title: "Example",
  url: "https://example.com"
});

// 获取书签树
chrome.bookmarks.getTree(function(bookmarkTreeNodes) {});

// 搜索书签
chrome.bookmarks.search({query: "example"}, function(results) {});</code></pre>
                </section>

                <!-- 存储能力 -->
                <section id="storage">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">存储能力</h2>

                    <h3 class="text-xl font-semibold mt-6 mb-4">1. 同步存储 (chrome.storage.sync)</h3>
                    <ul class="list-disc ml-6 text-gray-700 mb-4">
                        <li>数据自动同步到用户的Chrome账号</li>
                        <li>存储限制：
                            <ul class="list-disc ml-6">
                                <li>单个项目：8KB</li>
                                <li>总存储量：100KB</li>
                            </ul>
                        </li>
                    </ul>
                    <pre><code>chrome.storage.sync.set({key: value}, function() {});
chrome.storage.sync.get(['key'], function(result) {});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">2. 本地存储 (chrome.storage.local)</h3>
                    <ul class="list-disc ml-6 text-gray-700 mb-4">
                        <li>仅存储在本地设备</li>
                        <li>存储限制：5MB</li>
                    </ul>
                    <pre><code>chrome.storage.local.set({key: value}, function() {});
chrome.storage.local.get(['key'], function(result) {});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">3. 会话存储 (chrome.storage.session)</h3>
                    <ul class="list-disc ml-6 text-gray-700 mb-4">
                        <li>仅在浏览器会话期间有效</li>
                        <li>存储限制：10MB</li>
                    </ul>
                    <pre><code>chrome.storage.session.set({key: value}, function() {});
chrome.storage.session.get(['key'], function(result) {});</code></pre>
                </section>

                <!-- 网络请求能力 -->
                <section id="network">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">网络请求能力</h2>

                    <h3 class="text-xl font-semibold mt-6 mb-4">1. 声明式网络请求 (declarativeNetRequest)</h3>
                    <pre><code>{
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">2. 网络请求监听 (webRequest)</h3>
                    <pre><code>chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: details.url.indexOf("blocked") != -1};
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
);</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">3. 网络状态 (system.network)</h3>
                    <pre><code>chrome.system.network.getNetworkInterfaces(function(interfaces) {});</code></pre>
                </section>

                <!-- 用户界面能力 -->
                <section id="ui">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">用户界面能力</h2>

                    <h3 class="text-xl font-semibold mt-6 mb-4">1. 浏览器按钮 (action)</h3>
                    <pre><code>chrome.action.setIcon({path: "icon.png"});
chrome.action.setBadgeText({text: "NEW"});
chrome.action.setPopup({popup: "popup.html"});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">2. 右键菜单 (contextMenus)</h3>
                    <pre><code>chrome.contextMenus.create({
  title: "My Menu Item",
  contexts: ["selection"],
  onclick: function(info, tab) {}
});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">3. 通知 (notifications)</h3>
                    <pre><code>chrome.notifications.create({
  type: "basic",
  iconUrl: "icon.png",
  title: "通知标题",
  message: "通知内容"
});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4">4. 命令快捷键 (commands)</h3>
                    <pre><code>{
  "commands": {
    "toggle-feature": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      },
      "description": "Toggle feature"
    }
  }
}</code></pre>
                </section>
            </div>
        </div>
    </main>
</body>
</html>
